.jpg)
.jpg)
.jpg)
NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.
Photographs for Websites
Photographs can add color in interest to a website. They can also provide information about size, shape and position, etc.
Photographs for a website can come from several places.
- The client may have photos they want you to use.
- The client may want you to take photographs for their website.
- You can also purchase photographs.
- You can find free photographs. Always be aware of copyrights.
Photographs for websites do not have to be very large. Digital cameras that can be used for taking photo for a website are very inexpensive. I recently purchased a 14.1 megapixel camera for less than $200.
Once you have taken the photo, they will need to be cropped, resized and maybe rotated.
Note: Use images carefully - Loading images take time, so limit the size and the number of images used on a web page.
Format
The best format for photographs is JPG which stands for Joint Photographic Experts Group.
Pros
- jpg files can contain 16.7 million colors (called 24-bit)
- jpg format is best for images that have subtle color changes, depth, lighting effects or other gradations of color or tone.
Cons
- jpg files can not be as compressed as other formats
HTML Code for Images
The code to add an image to a web page is:
<img src="url" alt="some_text"/>
For example:
<img src="images/asafercompany140.jpg" width="140" height="121" alt="A Safer Company LLC" />
- src - the source or URL of the image you want to display
- width and height should also be specified. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading of the image.
- alt - should always be specified and should include meaningful information about the photograph. It provides alternative information for an image if a user cannot view the image because of slow connection, an error in the src attribute, or if the user uses a screen reader.
- align - determines where the image is places in relationship to the text around it.
Examples of Align
| Code | Example |
|---|---|
|
<img src="images/asafercompany140.jpg" alt="A Safer Company LLC" align="bottom" /> This is the default. |
Text at Bottom of Image
|
|
<img src="images/asafercompany140.jpg" alt="A Safer Company LLC" align="absmiddle" /> Aligns the middle of the text with the middle of the image |
Text at Middle of Image
|
|
<img src="images/asafercompany140.jpg" alt="A Safer Company LLC" align="top" /> Textop usually does the same as top |
Text at Top of Image
|
<img src="images/asafercompany140.jpg" alt="A Safer Company LLC" align="right" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br clear="all" /> Curabitur auctor, turpis vel rutrum ultricies, risus erat sodales lacus, sit amet eleifend nunc velit a dui.Duis id elit nibh, vel suscipit elit. Aliquam eros neque, feugiat nec hendrerit eu, ullamcorper vel urna. <br clear="all" /> stops the text from wrapping around the image |
Float Image Right
|
|
<img src="images/asafercompany140.jpg" alt="A Safer Company LLC" align="left" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor, turpis vel rutrum ultricies, risus erat sodales lacus, sit amet eleifend nunc velit a dui.<br clear="all" /> Duis id elit nibh, vel suscipit elit. Aliquam eros neque, feugiat nec hendrerit eu, ullamcorper vel urna. |
Float Image Left
|
<a href="/index.html"><img src="images/asafercompany140.jpg" alt="A Safer Company LLC" align="bottom" /></a> |
Image as Link
|
Centering Images
Images can be centered by using the HTML tag <center></center>:
<center><img src="images/asafercompany140.jpg" width="70" height="61" alt="A Safer Company LLC" /></center>
Page last updated: May 31, 2012 10:28 AM
Content and Navigation...